<template>
<div class="eight" ref="eight">
    <div class="title">
        核心团队
    </div>
    <div class="container">
        <div class="item">
            <div class="outside">
                <div class="top">
                    <div class="name">
                        黄龙龙
                    </div>
                    <div class="work">
                        产品总监
                    </div>
                </div>
                <div class="bottom">
                    <img src="@/assets/photo/eight1.png" alt="">
                </div>
            </div>
            <div class="inside">
                <div class="one">
                    <div class="name">
                        黄龙龙
                    </div>
                    <div class="work">
                        产品总监
                    </div>
                </div>
                <div class="two">
                    <div>多年互联网行业产品经验</div>
                    <div>成功打造多款B端产品</div>
                </div>
                <div class="three">
                    “产品就是为了帮助客户获取更大的价值 ，最好的软件产品就是最简单好用的产品”
                </div>
                <div class="four">
                    <img src="@/assets/photo/eight1.png" alt="">
                </div>
            </div>
        </div>
        <div class="item">
            <div class="outside">
                <div class="top">
                    <div class="name">
                        王超
                    </div>
                    <div class="work">
                        首席架构师
                    </div>
                </div>
                <div class="bottom">
                    <img src="@/assets/photo/eight2.png" alt="">
                </div>
            </div>
            <div class="inside">
                <div class="one">
                    <div class="name">
                        王超
                    </div>
                    <div class="work">
                        首席架构师
                    </div>
                </div>
                <div class="two">
                    <div>精通多种计算机语言</div>
                    <div>擅长各种软件架构设计</div>
                </div>
                <div class="three">
                    “挖掘技术的深度，一直是我工作兴趣的动力源泉”
                </div>
                <div class="four">
                    <img src="@/assets/photo/eight2.png" alt="">
                </div>
            </div>
        </div>
        <div class="item">
            <div class="outside">
                <div class="top">
                    <div class="name">
                        付盈盈
                    </div>
                    <div class="work">
                        交互设计师
                    </div>
                </div>
                <div class="bottom">
                    <img src="@/assets/photo/eight3.png" alt="">
                </div>
            </div>
            <div class="inside">
                <div class="one">
                    <div class="name">
                        付盈盈
                    </div>
                    <div class="work">
                        交互设计师
                    </div>
                </div>
                <div class="two">
                    <div>资深交互体验分析设计</div>
                    <div>擅长产品的行为设计和界面设计</div>
                </div>
                <div class="three">
                    “我赋予软件产品‘灵性’，让它可以给您精准‘对话’。”
                </div>
                <div class="four">
                    <img src="@/assets/photo/eight3.png" alt="">
                </div>
            </div>
        </div>
        <div class="item">
            <div class="outside">
                <div class="top">
                    <div class="name">
                        李华强
                    </div>
                    <div class="work">
                        客服经理
                    </div>
                </div>
                <div class="bottom">
                    <img src="@/assets/photo/eight4.png" alt="">
                </div>
            </div>
            <div class="inside">
                <div class="one">
                    <div class="name">
                        李华强
                    </div>
                    <div class="work">
                        客服经理
                    </div>
                </div>
                <div class="two">
                    <div>多年客户服务团队管理经验</div>
                    <div>资深客户服务经理</div>
                </div>
                <div class="three">
                    “客户的问题，就是我们千方百计要解决的问题”
                </div>
                <div class="four">
                    <img src="@/assets/photo/eight4.png" alt="">
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import {start_to_end} from '@/assets/tools/public_tools';
export default {
    name: 'Eight',
    props:{
        back_top:{
            type:Boolean,
            default:false,
        },
    },
    watch:{
        back_top(){
            if(this.back_top){
                this.on_back_top();
            }
        },
    },
    methods:{
        on_back_top(){
            let _top = document.documentElement.scrollTop + this.$refs.eight.getBoundingClientRect().top - 85;
            start_to_end(document.documentElement.scrollTop,_top,300);
        },
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.eight{
    width: 100%;
    background-color: #f5fcf9;
    display: flex;
    flex-direction: column;
    align-items:center;
    >.title{
        text-align: center;
        margin-top: 30px;
        margin-bottom: 30px;
        font-size: 32px;
        line-height: 100%;
        font-weight: 600;
    }
    >.container{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 30px;
        border-radius: 3px;
        overflow: hidden;
        >.item{
            width:200px;
            height: 450px;
            transition: all 0.5s;
            >.outside{
                transition: all 0.5s;
                width: 100%;
                height: 100%;
                padding: 30px;
                box-sizing: border-box;
                background-image: linear-gradient(-225deg, #D4FFEC 0%, #57F2CC 48%, #4596FB 100%);
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                >.top{
                    >.name{
                        line-height: 100%;
                        font-size: 20px;
                        margin-bottom: 15px;
                        font-weight: bold;
                    }
                    >.work{
                        line-height: 100%;
                        font-size: 15px;
                        font-weight: bold;
                    }
                }
                >.bottom{
                    img{
                        width: 100%;
                        max-width: 140px;
                    }
                }
            }
            >.inside{
                background-color: aquamarine;
                opacity: 0.5;
                width: 100%;
                height: 100%;
                display: grid;
                grid-template-columns: 1fr min-content;
                grid-template-rows: 1fr min-content;
                text-align: left;
                transition: all 0.5s;
                >.one{
                    padding: 40px;
                    box-sizing: border-box;
                    min-width: 40px;
                    >.name{
                        line-height: 100%;
                        font-size: 20px;
                        margin-bottom: 15px;
                        font-weight: bold;
                    }
                    >.work{
                        line-height: 100%;
                        font-size: 15px;
                        font-weight: bold;
                    }
                }
                >.two{
                    padding: 40px;
                    box-sizing: border-box;
                    font-size: 15px;
                    line-height: 100%;
                    min-width: fit-content;
                    >div{
                        margin-bottom: 10px;
                    }
                }
                >.three{
                    padding: 40px;
                    box-sizing: border-box;
                    font-size: 15px;
                    line-height: 30px;
                    min-width: 40px;
                }
                >.four{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 10px;
                    img{
                        width: 0px;
                        height: 0px;
                        transition: all 0.5s;
                    }
                }
            }
            &:hover{
                width: 500px;
                >.outside{
                    display: none;
                }
                >.inside{
                    opacity: 1;
                    img{
                        width: 250px; 
                        height: 250px;
                    }
                }
            }
        }
    }
}
</style>
